<!DOCTYPE HTML>
<html>
<head>
	<title>Web Image Processing Studio</title>	
	
	<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
	<meta name="description" content="description"/>
	<meta name="keywords" content="keywords"/> 
	<meta name="author" content="author"/> 
	
	<link rel="stylesheet" type="text/css" href="css/default.css" media="screen"/>
	<link rel="stylesheet" type="text/css" href="css/jquery-ui.css" media="screen"/>

	<script src="https://www.google.com/jsapi?key=ABQIAAAA7vWgv95J55MImldIFZ5YtRQZ1n09wrK6Vkol9-3Nkozc3NPcZRRu9rP1IZFQB1vW-DVa7EecBXOY6A" type="text/javascript"></script>
	<script type="text/javascript">	
	    google.load("jquery", "1");
	    google.load("jqueryui", "1");	    
	</script>
	<!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>-->
	
	<!--
	<script src="js/processing-1.2.3.js" type="text/javascript"></script>
	<script src="js/sylvester.src.js" type="text/javascript"></script>
	-->
	
	<script src="js/Filters.js" type="text/javascript"></script>
	<script src="js/Kernels.js" type="text/javascript"></script>
	<script src="js/Math.js" type="text/javascript"></script>
	<script src="js/Utilities.js" type="text/javascript"></script>
	

	<script src="js_gui/wipsMain.js" type="text/javascript"></script>
	<script src="js_gui/wipsDialog.js" type="text/javascript"></script>
	<script src="js_gui/wipsView.js" type="text/javascript"></script>
	<script src="js_gui/wipsProcessor.js" type="text/javascript"></script>
	<script src="js_gui/wipsAnalysis.js" type="text/javascript"></script>

</head>

<body>
	<div id="holder"></div>
	<div class="inner-container">

		<div class="menu">
			<a href="javascript:void(0)" onClick="test();">About</a>
		</div>

		<div class="main">		
			
			<div id="content" class="content">
				<div id="mid" class="mid">
					<canvas id="canvasMain" width="2000" height="1000"></canvas>
					<img id="canvasImg" alt="Right click to save me!">
				</div>

				<div id="status">Status notification</div>
			</div>

			<div id="navigation" class="navigation">

				<h2 class="category_navigation">File</h2>
				<ul class="toggle_navigation">
					<li><input type="file" id="files" name="files[]" multiple onchange="filesOnChange(this);" /></li>
					<!--<li><a href="javascript:void(0)" onClick="openFile();">Open</a></li>-->
					<li><a href="javascript:void(0)" onClick="saveFile();">Save</a></li>
					<li><a href="javascript:void(0)" onClick="reload();">Reload</a></li>
				</ul>		
			
				<h2 class="category_navigation">View</h2>
				<ul class="toggle_navigation">
					<li><a href="javascript:void(0)">Crop</a></li>
					<li><a href="javascript:void(0)">Zoom</a></li>
					<li><a href="javascript:void(0)">Original</a></li>
					<li><a href="javascript:void(0)">Fit</a></li>
					<li><a href="javascript:void(0)">Resize</a></li>
					<li><a href="javascript:void(0)">Rotate</a></li>
					<li><a href="javascript:void(0)">Color System</a></li>
				</ul>

				<h2 class="category_navigation">Analysis</h2>
				<ul class="toggle_navigation">
					<li><a href="javascript:void(0)">Line Profile</a></li>
					<li><a href="javascript:void(0)">Screen Stretch</a></li>
					<li><a href="javascript:void(0)">Histogram</a></li>
					<li><a href="javascript:void(0)">Threshold</a></li>
				</ul>

				<h2 class="category_navigation">Processor</h2>
				<ul class="toggle_navigation">
					<li><a href="javascript:void(0)" onClick="onGrayscale();">Grayscale</a></li>
					<li><a href="javascript:void(0)" onClick="onInvert();">Invert</a></li>
					<li><a href="javascript:void(0)" onClick="onBrighten();">Brighten</a></li>
					<li><a href="javascript:void(0)" onClick="onEqualizeHistogram();">Equalize Histogram</a></li>
					<li><a href="javascript:void(0)" onClick="onBlur();">Gaussian Blur</a></li>
					<li><a href="javascript:void(0)" onClick="onMedian();">Median Blur</a></li>
					<li><a href="javascript:void(0)" onClick="onCanny();">Canny Edge</a></li>
					<li><a href="javascript:void(0)" onClick="onLoG();">Laplace of Gaussian</a></li>
					<li><a href="javascript:void(0)" onClick="onNoise();">Noise Generate</a></li>
					<li><a href="javascript:void(0)">Convolution</a></li>
					<li><a href="javascript:void(0)">Morphology</a></li>
					<li><a href="javascript:void(0)">Spatial Transform</a></li>
					<li><a href="javascript:void(0)">Frequency Transform</a></li>
				</ul>

			</div>

			<div class="clearer">&nbsp;</div>

		</div>

		<div class="footer">
			<span class="left">
				&copy; 2011 <a href="wipscode.appspot.com">Web Image Processing Studio</a>
			</span>

			<span class="right">
				<a href="wipscode.appspot.com">Website template by WIPS Team</a>
			</span>

			<div class="clearer"></div>
		</div>

	</div>
</body>
</html>